<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购买个性简历,使用打动hr的专业简历</title>
  <link rel="stylesheet" href="/dev/assets/css/geek-job/buy-resume.css">
  <link rel="stylesheet" href="/dev/plugins/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="/dev/plugins/layui/layui/css/layui.css">
    <link rel="icon" href="/dev/assets/img/geek-job/wanli.jpg" type="image/x-icon">
</head>
<body style="background-color: #CBDCF7">
<div id="nav"></div>
<div class="user-resume-wrapper">
  <div class="my-resumes-box">
    <div class="header" style="width:100%">
      <span>简历商店</span>
      <div class="operate-container">
        <div class="btn-add" lay-on="test-page-1" onclick="countdown()">
<!--        <div class="btn-add" lay-on="test-page-1">-->
      购买简历
        </div>
          <div class="btn-adds" lay-on="test-page-2">
      订单退款
          </div>
      </div>
    </div>
<!--      简历缩略图-->
    <div class="resume-thumbnail-list">
        <div class="template">
            <div class="content">
                <img src="/dev/assets/img/geek-job/business.jpg" class="img" lay-on="test-tips-photos-one">
                <button class = "download" type="button" id="business" onclick="alertbuyer(1)">下载</button>
            </div>
        </div>
        <div class="template">
            <div class="content">
                <img src="/dev/assets/img/geek-job/simple.jpg" class="img" lay-on="test-tips-photos-two">
                <button class = "download" type="button" id="simple" onclick="alertbuyer(2)">下载</button>
            </div>
        </div>
        <div class="template">
            <div class="content">
                <img src="/dev/assets/img/geek-job/literary.jpg" class="img" lay-on="test-tips-photos-three">
                <button class = "download" type="button" id="literary" onclick="alertbuyer(3)">下载</button>
            </div>
        </div>
    </div>
  </div>
</div>
<script src="/dev/plugins/jquery/jquery.min.js"></script>
<script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>
<script src="/dev/plugins/layui/layui/layui.js"></script>
<script>
    let name
  $(function () {
    $("#nav").load("/dev/views/common/nav.html")

    let Inpu = new URLSearchParams(window.location.search);
    var baseInput = Inpu.get('baseInput');
    if (baseInput != null || baseInput != "") {
      $("#input").val(baseInput)
    }

      // $.ajax({
      //     headers: {
      //         "id": localStorage.getItem("id"),
      //         "token": localStorage.getItem("token")
      //     },
      //     url: `/dev/resume-find/get-resume`,
      //     type: "get",
      //     success: function (resumeList) {
      //         console.log(resumeList)
      //         let str = "";
      //         let number = resumeList.data.length;
      //         for (let i = 0; i < number; i++) {
      //             str += ``
      //         }
      //     }
      // })
  })

    layui.use(function () {
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;

        $.ajax({
            headers: {
                "id": localStorage.getItem("id"),
                "token": localStorage.getItem("token")
            },
            url: `/dev/resume-find/get-resume`,
            type: "get",
            success: function (resumeList) {
                console.log(resumeList)
                let str = `<div class="page-refrech">
                                            <div class="content">
                                                        <div class="type-name">
                                                            <span>购买简历</span>
                                                        </div>
                                                        <div class="same type-server">
                                                            <div class="row-title">
                                                                <span>选择简历</span>
                                                            </div>
                                                            <ul>`;
                let number = resumeList.data.length;
                for (let i = 0; i < number; i++) {
                    str += `<li class="left changecolor" onclick="Changecolor(${i})">
                                                                    <div class="discount" style="display: none;"></div>
                                                                    <div class="selected"></div>
                                                                    <div class="spec">
                                                                        <div class="amount">${resumeList.data[i].resuName}</div>
                                                                    </div>
                                                                    <div id="rbm10">${resumeList.data[i].resuPrice} Rmb</div>
                                                                </li>`
                }
                ;
                str += `</ul>
                                                            </div>
                                                        </div>
                                                        <div class="paybox">
                                                            <div data-v-7edc112c="" class="price-wrap">
                                                                <div data-v-7edc112c="" class="unified-style">
                                                                    <div data-v-7edc112c="" class="price-show">
                                                                        <div data-v-7edc112c="" class="need-pay">
                                                                            <span data-v-7edc112c="" class="pay-result">还需支付</span>
                                                                            <span data-v-7edc112c="" class="value"> ¥
                                                                                <span data-v-7edc112c="" style="font-size: 28px;" id="paynumber">${resumeList.data[0].resuPrice}</span>
                                                                            </span>
                                                                        </div>
                                                                        <button id="goods-and-discount-wrap" class="coupon-wrap" onclick="goToPay()">
                                                                             <span class="buyit">点击购买</span>
                                                                        </button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                            <div>
                                                                <div class="pay-code">
                                                                    <div class="qrcode-wrap">
                                                                        <img src="/dev/assets/img/geek-job/pay.jpg" alt="" class="qr-code" id="qr-code">
                                                                        <div class="payment-way">
                                                                            <span class="tool-tip-container">请使用支付宝扫码支付</span>
                                                                            </div>
                                                                        </div>
                                                                        <div class="payment-pattern">
                                                                            <div class="qrcode-desc" ></div>
                                                                            <span class="already-pay high-light" id="qrcode-desc1" style="display: block ">请在规定时间内完成支付</span>
                                                                        </div>
                                                                        <p class="text-protocol text"> 付费即表示同意 <a href="" target="_blank" style="text-decoration: none">《职途万里增值服务协议》</a>
                                                                        </p>
<!--                                                                        <button class = "refund" type="button">退款</button>-->
                                                                    </div>
                                                                </div>
                                                                <span class="why" onclick="checkit()">订单未更新,我已支付</span>
                                                        </div>
                                                    </div>`;

                // 事件
                util.on('lay-on', {
                    'test-page-1': function () {
                        layer.open({
                            type: 1,
                            area: ['940px', '600px'], // 宽高
                            title: false,
                            content: str
                        });
                        let change = document.getElementsByClassName("changecolor")

                        change[0].addEventListener('click', function () {
                            change[1].style.backgroundColor = ""
                            change[1].style.borderStyle = ""
                            change[1].style.borderWidth = ""
                            change[1].style.borderColor = ""
                            change[2].style.backgroundColor = ""
                            change[2].style.borderStyle = ""
                            change[2].style.borderWidth = ""
                            change[2].style.borderColor = ""
                            change[0].style.backgroundColor = "#CBDCF7"
                            change[0].style.borderStyle = "solid"
                            change[0].style.borderWidth = "1px"
                            change[0].style.borderColor = "#84ADEA"
                            document.getElementById("paynumber").innerHTML = 10;
                        })
                        change[1].addEventListener('click', function () {
                            change[2].style.backgroundColor = ""
                            change[2].style.borderStyle = ""
                            change[2].style.borderWidth = ""
                            change[2].style.borderColor = ""
                            change[0].style.backgroundColor = "#fff"
                            change[0].style.borderStyle = ""
                            change[0].style.borderWidth = ""
                            change[0].style.borderColor = "#e3e7ed"
                            change[1].style.backgroundColor = "#CBDCF7"
                            change[1].style.borderStyle = "solid"
                            change[1].style.borderWidth = "1px"
                            change[1].style.borderColor = "#84ADEA"
                            document.getElementById("paynumber").innerHTML = 5;
                        })
                        change[2].addEventListener('click', function () {
                            change[0].style.backgroundColor = "#fff"
                            change[0].style.borderStyle = ""
                            change[0].style.borderWidth = ""
                            change[0].style.borderColor = "#e3e7ed"
                            change[1].style.backgroundColor = ""
                            change[1].style.borderStyle = ""
                            change[1].style.borderWidth = ""
                            change[1].style.borderColor = ""
                            change[2].style.backgroundColor = "#CBDCF7"
                            change[2].style.borderStyle = "solid"
                            change[2].style.borderWidth = "1px"
                            change[2].style.borderColor = "#84ADEA"
                            document.getElementById("paynumber").innerHTML = 15;
                        })
                        change[0].click()
                    },

                    'test-tips-photos-one': function () {
                        layer.photos({
                            photos: {
                                "title": "Photos Demo",
                                "start": 0,
                                "data": [
                                    {
                                        "alt": "商务风简历",
                                        "pid": 5,
                                        "src": "/dev/assets/img/geek-job/business.jpg",
                                    }
                                ]
                            },
                            footer: false // 是否显示底部栏 --- 2.8.16+
                        });
                    },
                    'test-tips-photos-two': function () {
                        layer.photos({
                            photos: {
                                "title": "Photos Demo",
                                "start": 0,
                                "data": [
                                    {
                                        "alt": "商务风简历",
                                        "pid": 5,
                                        "src": "/dev/assets/img/geek-job/simple.jpg",
                                    }
                                ]
                            },
                            footer: false // 是否显示底部栏 --- 2.8.16+
                        });
                    },
                    'test-tips-photos-three': function () {
                        layer.photos({
                            photos: {
                                "title": "Photos Demo",
                                "start": 0,
                                "data": [
                                    {
                                        "alt": "商务风简历",
                                        "pid": 5,
                                        "src": "/dev/assets/img/geek-job/literary.jpg",
                                    }
                                ]
                            },
                            footer: false // 是否显示底部栏 --- 2.8.16+
                        });
                    },
                })
            }
        })

        $.ajax({
            headers: {
                "id": localStorage.getItem("id"),
                "token": localStorage.getItem("token")
            },
            url: `/dev/resume-find/find-resume`,
            data: {
                "jsId": localStorage.getItem("id")
            },
            type: "get",
            success: function (buyList) {
                console.log(buyList)
                let str1 = `<div class="page-refrech">
                    <div class="content">
                        <div class="type-name">
                            <span>订单退款</span>
                        </div>
                        <div class="same type-server">
                            <div class="row-title">
                                <span>选择订单</span>
                            </div>
                            <ul id="changecolor">`;
                let number1 = buyList.data.length;
                for (let i = 0; i < number1; i++) {
                    str1 += `<li class="left" >
                                                                    <div class="discount" style="display: none;"></div>
                                                                    <div class="selected"></div>
                                                                    <div class="spec">
                                                                        <div class="amount" id="amount1">${buyList.data[i].ordTitle}</div>
                                                                    </div>
                                                                    <div id="rbm10">${buyList.data[i].ordTotalFee} Rmb</div>
                                                                </li>`;
                }
                str1 += `</ul>
                        </div>
                    </div>`;
                    str1+=`<div class="paybox">
                        <div data-v-7edc112c="" class="price-wrap">
                            <div data-v-7edc112c="" class="unified-style">
                                <div data-v-7edc112c="" class="price-show">
                                    <div data-v-7edc112c="" class="need-pay">
                                        <span data-v-7edc112c="" class="pay-result">可退款</span>
                                        <span data-v-7edc112c="" class="value"> ¥
                                            <span data-v-7edc112c="" style="font-size: 28px;" id="paynumber">${buyList.data[0].ordTotalFee}</span>
                                        </span>
                                    </div>
                                    <button id="goods-and-discount-wrap" class="coupon-wrap" onclick="goToRefund()">
                                        <span class="refundit">确认退款</span>
                                    </button>
                                </div>
                            </div>
                        </div>`;
                str1+=`</div>
                </div>`;
                console.log(str1)
                util.on('lay-on', {
                        'test-page-2': function () {
                            layer.open({
                                type: 1,
                                area: ['940px', '600px'], // 宽高
                                title: false,
                                content: str1
                            });
                            let change = document.getElementById("changecolor").children
                            console.log(change[0])
                            for (let i=0;i<change.length;i++){
                                change[i].onclick=function (){
                                    name = change[i].children[2].children[0].innerText
                                    // console.log(name)
                                    change[i].style.backgroundColor = "#CBDCF7"
                                    change[i].style.borderStyle = "solid"
                                    change[i].style.borderWidth = "1px"
                                    change[i].style.borderColor = "#84ADEA"
                                    for (let j=0;j<change.length;j++){
                                        if (j!==i){
                                            change[j].style.backgroundColor = ""
                                            change[j].style.borderStyle = ""
                                            change[j].style.borderWidth = ""
                                            change[j].style.borderColor = ""
                                        }
                                    }
                                    $("#paynumber").html(change[i].children[3].innerText.split(" ")[0])

                                }

                            }
                            console.log(name)
                            // change[0].addEventListener('click', function () {
                            //     change[1].style.backgroundColor = ""
                            //     change[1].style.borderStyle = ""
                            //     change[1].style.borderWidth = ""
                            //     change[1].style.borderColor = ""
                            //     change[2].style.backgroundColor = ""
                            //     change[2].style.borderStyle = ""
                            //     change[2].style.borderWidth = ""
                            //     change[2].style.borderColor = ""
                            //     change[0].style.backgroundColor = "#CBDCF7"
                            //     change[0].style.borderStyle = "solid"
                            //     change[0].style.borderWidth = "1px"
                            //     change[0].style.borderColor = "#84ADEA"
                            //     document.getElementById("paynumber").innerHTML = 10;
                            // })
                            // change[0].click()
                        }
                    }
                )
            }
        })
    })




    let rmb;
    function goToPay(){
        let rbm = document.querySelector("#paynumber")
        $.ajax({
            headers:{
                "id":localStorage.getItem("id"),
                "token":localStorage.getItem("token")
            },
            url:`/dev/alipays/pay/${rmb}`,
            type: "post",
            async: false,
            success:function (formStr){
                if (formStr.data===null){
                    window.alert("你已经购买过了,不可重复购买哦")
                }else {
                    console.log(formStr)
                    //将支付宝返回的form表单写在浏览器中,自动触发表单submit提交
                    document.write(formStr.data);
                    // window.location='/dev/views/geek-job/success-pay.html'
                }
            }
        })
    }
    function goToRefund(){
        console.log(name)
        $.ajax({
            headers:{
                "id":localStorage.getItem("id"),
                "token":localStorage.getItem("token")
            },
            url:`/dev/alipays/refund/${name}/${localStorage.getItem("id")}`,
            type: "post",
            async: false,
            success:function (message){
                console.log(message.data)
                // layer.msg(message.data);
                getRedirections()
                window.alert("退款成功~")
            }
        })
    }

    function checkit(){
        $.ajax({
            headers:{
                "id":localStorage.getItem("id"),
                "token":localStorage.getItem("token")
            },
            url: `/dev/alipays/check/${localStorage.getItem("id")}`,
            type: "post",
            async: false,
            success: function (result){
                if (result.data == null){
                    window.alert("暂无订单,请先购买~")
                    getRedirections();
                }else {
                    window.alert("订单状态已更新,请刷新查看~")
                    getRedirections();
                }
            }
        })
    }

  function countdown(){
    Changecolor();
  }

  let x;
  function Changecolor(templateIndex) {
      rmb = Number(templateIndex)+1;
      const Image = document.getElementById("qr-code");
      // if (templateIndex === 0) {
      //     Image.src = "/dev/assets/img/geek-job/pay.jpg";
      // } else if (templateIndex === 1) {
      //     Image.src = "/dev/assets/img/geek-job/frog.jpg";
      // } else if (templateIndex === 2) {
      //     Image.src = "/dev/assets/img/geek-job/emptyBox.jpg";
      // }
      // 初始化倒计时
      let countDownTime = 15 * 60 * 1000;
      let countDownDate = new Date().getTime() + countDownTime;
      // 更新倒计时
      clearTimeout(x);
      x = setInterval(function (){
              // 计算当前时间和倒计时时间的差值
              let now = new Date().getTime();
              let distance = countDownDate - now;
              // 计算剩余的分钟数和秒数
              let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
              let seconds = Math.floor((distance % (1000 * 60)) / 1000);
              // 将剩余的分钟数和秒数显示在页面上
              document.getElementById("qrcode-desc1").innerHTML = "请在 " + minutes + "分" + seconds + "秒内完成支付";
              // 如果倒计时结束，停止更新倒计时
              if (distance < 0) {
              clearInterval(x);
              document.getElementById("qrcode-desc1").innerHTML = "EXPIRED";
              getRedirections();
          }
      }, 1000);
  }

  function getRedirections() {
    window.location.href = "/dev/views/geek-job/buy-resume.html";
  }

  function alertbuyer(num){
      if (num===1){
          name="商务风简历";
      }else if (num===2){
          name="简约风简历";
      }else if (num===2){
          name="文艺风简历";
      }
      $.ajax({
          headers: {
              "id": localStorage.getItem("id"),
              "token": localStorage.getItem("token")
          },
          url: `/dev/resume-find/download/${name}/${localStorage.getItem("id")}`,
          type: "post",
          success: function (qnaddres){
              console.log(qnaddres)
              if (qnaddres.data!='') {
                  window.open(`${qnaddres.data}`);
              }else{
                  window.alert("请先购买~");
              }
          }
      })
  }
</script>
</body>
</html>